<template>
  <div>
       <el-container>
          <el-header>
            <el-row :gutter="10">
             <el-col :span="6"><el-button @click="goIndex" type="primary"><-返回首页</el-button></el-col>
            </el-row>
          </el-header>
          <el-main>
              <div class="content">
                  <el-row :gutter="10">
                   <el-col :span="8">

                      <el-image style="width: 200px;height:300px" :src="book.bookImage"></el-image>

                   </el-col>
                    <el-col :span="16" style="text-align: left">
                           <div class="con" style="line-height: 20px"><img style="padding-top:10px" src="@/assets/image/logo2.png" />

                           <span style="font-size: 30px;color: #42b983">{{book.bookName}}</span>

                           </div>


                      <div class="con" style="height:100px;background-color: #f3f3f3">
                        <span>特惠价格:</span><span style="color:red;font-size: 40px">￥{{book.price}}</span>
                        <span style="padding-left: 20px"><a href="">降价通知</a></span>
                      </div>


                      <div  class="con">
                        配送至 :{{userInfo.address}}
                      </div>


                      <div class="con">
                        <el-rate v-model="book.rate" disabled=true
                        ></el-rate>
                      </div>

                      <el-dialog
                          title="购买信息"
                          :visible.sync="dialogVisible"
                          width="30%"
                        >

                        <span slot="footer" class="dialog-footer">
                          <el-button @click="dialogVisible = false">取 消</el-button>
                          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                        </span>
                      </el-dialog>

                      <div class="con">
                        <el-input-number v-model="buyCount" @change="handleChange" :min="1" :max="10000"
                                         label="label"></el-input-number>
                      </div>

                      <div class="con">
                          <el-button type="primary">加入购物车</el-button>
                        <el-button type="primary" @click="buy">立即购买</el-button>
                      </div>
                    </el-col>
                  </el-row>
              </div>



            <div style="width: 80%;margin:20px auto">


              <div>
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <div style="text-align: left;font-size: 30px;padding:20px;background: gray">
                      商品评论页面
                    </div>
                  </div>
                  <div v-for="item in commentList"  class="text item">
                    {{item.comment}}
                  </div>
                </el-card>
              </div>
            </div>
          </el-main>
       </el-container>
  </div>
</template>

<script>


import {listSearch} from "@/config/mixin/searchMixin";

export default {
  data() {
    return {
      userInfo: [],
      book:{},
      buyCount:0,
      dialogVisible:false,
      commentList:[],
    }
  },
  mixins: [listSearch],
  created() {
    this.userInfo = JSON.parse(this.$cookie.get('userInfo'));
    this.book = this.$route.params
    this.getCommentList(this.$route.params.id)
  },
  methods: {

    getCommentList(id){

      let params = {
        url:'comment',
        method:'get',
        payload:{
          bookId:id
        }
      }

      this.sendReq(params, res=> {
        console.log(res);
        this.commentList = res.data.records
      })
    },
    handleChange(){

    },
    buy(){
     this.dialogVisible = true;
    },
    goIndex(){
      this.$router.push('index')
    },

    handleClose(data){

    },
    test() {

      console.log(this.$route.params)

    }
  },
}
</script>

<style  scoped>
    .content{
      width: 80%;
      margin: auto;
    }
    .con{
      margin-top:20px;
    }
</style>